Ext.define("app.principal.view.Menu", {
	extend : 'Ext.tree.Panel',
	alias : 'widgent.Menu',
	store : Ext.create('Ext.data.TreeStore', {
		proxy : {
			type : 'ajax',
			url : CONTEXT_PATH+'/mvc/login/getMenu'
		},
		root : {
			name : 'CommerceApp',
			id : '0',
			expanded : true
		},
		fields : [ {
			name : 'name',
			type : 'string'
		}, {
			name : 'id',
			type : 'int'
		}, {
			name : 'leaf',
			type : 'boolean'
		},{
			name: 'classInit',
			type:'string'
		},{
			name: 'principalView',
			type:'string'
		}
		]
	}),
	height : 600,
	displayField : 'name',
	width : 250,
	useArrows : true,
	/* //descomentar  si se desea el toolbar para contraer o expandir el arbol
	dockedItems : [{
		xtype : 'toolbar',
		items : [ {
			iconCls : 'icon-expand-all',
			action:'expand-all'
		}, '-', {
			iconCls : 'icon-collapse-all',
			action:'collapse-all'
		} ]
	}],*/
	initComponent:function(){
		this.callParent();
		/*	//descomentar  si se desea el toolbar para contraer o expandir el arbol
		this.down("toolbar button[action=expand-all]").on("click",function(){
			this.expandAll();
		},this);
		
		this.down("toolbar button[action=collapse-all]").on("click",function(){
			this.collapseAll();
		},this);
		*/
		
	},
	listeners:{
		itemclick:function(view, record){
			var leaf = record.get("leaf");
			if(leaf == true){
				var classInit = record.get("classInit");
				var principalView = record.get("principalView");
				var tabPanel = this.up("viewport").down("tabpanel");
				var principalViewCmp = tabPanel.down(principalView);
				var tab = null;
				if(Ext.isEmpty(principalViewCmp)){
					var controller = Ext.create(classInit,{
						application:app, 
						scope:app
					});
					controller.init(principalView);
					tab = controller.getPrincipalView();
					tab.closable = true;
					tabPanel.add(tab);
				}else{
					tab = principalViewCmp;
				}
				tabPanel.setActiveTab(tab);
			}
		}
	}
});
